<button nz-button nzType="primary" nzSize="small" (click)="showAdd()">添加</button>
<nz-table [nzData]="dataList" [nzFrontPagination]="false" nzSize="small"
          [nzScroll]="{ x: '1200px', y: '480px' }">
  <thead>
  <tr>
    <th nzWidth="220px">标题</th>
    <th nzWidth="100px">分类</th>
    <th nzWidth="90px">日期</th>
    <th nzWidth="60px">状态</th>
    <th nzWidth="180px">内容</th>
    <th nzWidth="130px" nzRight>操作</th>
  </tr>
  </thead>

  <tbody>
  <tr *ngFor="let data of dataList">
    <td nz-tooltip nzTooltipTitle="{{data.name}}">{{ data.name }}</td>
    <td nz-tooltip nzTooltipTitle="{{data.categoryName}}">{{ data.categoryName }}</td>
    <td>{{ data.logDate | date:'yyyy-MM-dd' }}</td>

    <td style="vertical-align: middle;">
      <nz-tag
        [nzColor]="'default'"
        [style.color]="statusColorMap[data.statusName] || '#000000'"
        style="background-color: transparent;color: rgba(0, 0, 0, 0.85);border: none;font-size: 14px;font-family: inherit;padding: 0;line-height: 1.5;height: auto;"
      >
        {{ data.statusName }}
      </nz-tag>
    </td>

    <td>
      <a nz-button nzType="link" (click)="goToDetail(data.id)">查看详情</a>
    </td>
    <td nzRight>
      <button nz-button nzType="primary" nzSize="small" (click)="updateStudy(data.id)">修改</button>&nbsp;
      <button nz-popconfirm nzPopconfirmTitle="确定删除该条数据吗？"
              (nzOnConfirm)="deleteConfirm(data.id)"
              (nzOnCancel)="cancel()" nz-button nzType="primary" nzSize="small">删除
      </button>
    </td>
  </tr>
  </tbody>
</nz-table>

<nz-pagination nzShowSizeChanger [(nzPageIndex)]="pageInfo.pageNum" [nzTotal]="pageInfo.total"
               [(nzPageSize)]="pageInfo.pageSize"
               [nzShowTotal]="totalTemplate" (nzPageIndexChange)="getList()"
               (nzPageSizeChange)="getList()"></nz-pagination>

<ng-template #totalTemplate>总共 {{ pageInfo.total }} 条</ng-template>
<br/>

<nz-modal [(nzVisible)]="showAddFlag" nzTitle="添加学习日志" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  <ng-container *nzModalContent>
    <form nz-form>
      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired nzFor="email">标题</nz-form-label>
        <nz-form-control [nzSpan]="24">
          <input nz-input [(ngModel)]="studyInfo.name" name="studyInfo.name"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired>日期</nz-form-label>
        <nz-form-control [nzSpan]="24">
          <nz-date-picker [(ngModel)]="studyInfo.logDate" name="studyInfo.logDate"></nz-date-picker>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired>状态</nz-form-label>
        <nz-form-control [nzSpan]="24">
          <nz-select [(ngModel)]="studyInfo.statusName" name="studyInfo.statusName" nzPlaceHolder="请选择状态">
            <nz-option *ngFor="let s of status" [nzLabel]="s.status" [nzValue]="s.status"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired>内容</nz-form-label>
        <nz-form-control [nzSpan]="24">
          <textarea rows="6" nz-input [(ngModel)]="studyInfo.content" name="studyInfo.content"></textarea>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>

<nz-modal [(nzVisible)]="showUpdateFlag" nzTitle="更新学习日志" (nzOnCancel)="handleCancel()" (nzOnOk)="update()">
  <ng-container *nzModalContent>
    <form nz-form>
      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired nzFor="email">标题</nz-form-label>
        <nz-form-control [nzSpan]="24">
          <input nz-input [(ngModel)]="studyInfo.name" name="studyInfo.name"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired>日期</nz-form-label>
        <nz-form-control [nzSpan]="24">
          <nz-date-picker [(ngModel)]="studyInfo.logDate" name="studyInfo.logDate"></nz-date-picker>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired>状态</nz-form-label>
        <nz-form-control [nzSpan]="24">
          <nz-select [(ngModel)]="studyInfo.statusName" name="studyInfo.statusName" nzPlaceHolder="请选择状态">
            <nz-option *ngFor="let s of status" [nzLabel]="s.status" [nzValue]="s.status"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired>内容</nz-form-label>
        <nz-form-control [nzSpan]="24">
          <textarea rows="6" nz-input [(ngModel)]="studyInfo.content" name="studyInfo.content"></textarea>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>

<nz-modal [(nzVisible)]="showCommentFlag" nzTitle="更新学习日志" (nzOnCancel)="handleCancel()"
          (nzOnOk)="submitComment()">
  <ng-container *nzModalContent>
  </ng-container>
</nz-modal>
